<template>
  <bs-dialog
    :title="$t('提示')"
    :visible="visible"
    size="mini"
    class="deviceGroupDialog"
    @update:visible="updateVisible"
    @opened="opened"
  >
    <template slot="main">
      <div class="group-content">
        <div style="margin-top:20px;font-size:16px">是否自动创建以下一级分组:</div>
        <div
          v-for="(item, index) in exportGroups"
          :key="index"
          class="group-item"
        >
          <el-input v-model="item.groupName" placeholder="" :readonly="true">
            <el-button
              slot="append"
              style="width:80px"
              @click="groupEdit(item)"
            >
              <i class="iconfont icon-bianji-copy"
            /></el-button>
          </el-input>
        </div>
      </div>
    </template>
    <template slot="footer">
      <bs-confirm-button-icon
        :show-icon="false"
        @click.native="doConfirmEdit"
      ></bs-confirm-button-icon>
      <bs-cancel-button-icon
        :show-icon="false"
        @click.native="doCloseEdit"
      ></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    opened() {},
    doConfirmEdit() {
      this.$emit('groupEditConfirm')
      this.updateVisible(false)
    },
    doCloseEdit() {
      this.updateVisible(false)
    },
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    groupEdit(val) {
      this.$emit('groupDeviceEdit', val)
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    exportGroups: {
      type: Array,
      default: () => []
    }
  }
}
</script>


<style lang="scss" scoped>
.group-content {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  align-items: center;
  height: 340px;
  .group-item {
    margin: 20px 20px 0 20px;
  }
}
::v-deep .el-dialog__footer {
  padding:10px;
}
.icon-bianji-copy {
  color: #cbcbcb;
}
::v-deep .el-input__inner{height: 34px !important; line-height: 34px!important;}
</style>
